CSS 伪类

CSS 伪类 :only-child() 匹配或表示一个元素，该元素是其父元素的唯一子元素，或者换句话说，一个没有任何兄弟元素的元素。此伪类的行为方式与 :first-child :last-child 或 :nth-child(1) :nth-last-child(1) 相同，但特异性较低。

该伪类选择的元素必须有一个父级。

语法

:only-child {
   /* ... */ 
}

CSS :only-child() 示例

这是一个 :only-child 伪示例类，应用于 <div> 父元素下的 <p> 标记。

在此示例中，CSS 规则将仅应用于第一个 <p> 元素中找到的第一个 <p> 元素，因为这是唯一一个只有一个的父元素子元素。

<html>
<head>
<style>
   .field {
      margin: 1px;
      padding: 1px;
   }

   p:only-child {
      color: darkblue;
      background-color: lightpink;
   }

   div {
      border: 2px solid black;
      width: 500px;
   }
</style>
</head>
<body>
      <div class="field">
         <p>该 div 的唯一子元素</p>
      </div>
      
      <div class="field">
         <p>第一个孩子</p>
      <p>第二个孩子</p>
      </div>

      <div class="field">
          <h1>标题 - 第一个子元素 </h1>
       <p>只有p个孩子，但是第二个孩子</p>
      </div>
</body>
</html>

这里是 :only-child 伪类的示例，应用于 <li> 标记，位于 <ol> 和 <ul> 父元素下。

在此示例中，CSS 规则将应用于 <ol> 和 <ul> 元素中找到的唯一 <li> 元素。

<html>
<head>
<style>
   .field {
      margin: 1px;
      padding: 1px;
   }

   li:only-child {
      color: darkblue;
      background-color: lightpink;
      padding: 5px;
   }

   div {
      border: 2px solid black;
      width: 500px;
   }
</style>
</head>
<body>
      <div class="field">
         <ol>有序列表:
            <li>只有一个项目</li>
         </ol>
      </div>
      
      <div class="field">
         <ol>
            <li>项目1</li>
            <li>项目2</li>
         </ol>
      </div>

      <div class="field">
         <ul>无序列表:
            <li>第一个项目</li>
         </ul>
      </div>
</body>
</html>